<template>
  <v-container>
    <v-dialog id="messagelogout" v-model="message_dialog" max-width="290" persistent>
      <v-card>
        <v-card-title class="headline">{{$t("message.logout")}}</v-card-title>

        <v-card-text>{{$t("message.logouttext")}}</v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            
            text
            @click="message_dialog=false"
          >{{$t("message.cancel")}}</v-btn>
          <v-btn
            
            color="primary"
            text
            @click="logout"
          >{{$t("message.ok")}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!---顶栏--->
    <v-app-bar id="appbar" app color="primary" dark scroll-target="#scrolling-techniques-6" clipped-left>
      <v-fab-transition>
        <v-btn class="hidden-lg-and-up" icon fab @click="drawer=!drawer">
          <v-icon>mdi-menu</v-icon>
        </v-btn>
      </v-fab-transition>
      <img :src="logo" width="50px" height="50px" >
      <v-toolbar-title class="ml-2">{{$t("message.title")}}</v-toolbar-title>
      
      <v-spacer></v-spacer>
      

      <v-menu :close-on-content-click="false">
        <template v-slot:activator="{ on:menu }">
          <v-tooltip bottom>
            <template v-slot:activator="{ on:tooltip }">
              <v-btn v-on="{ ...tooltip, ...menu }" icon @click>
                <v-icon>mdi-palette</v-icon>
              </v-btn>
            </template>
            <span>{{$t('message.theme')}}</span>
          </v-tooltip>
        </template>
        <!--颜色选择器-->
        <v-card class="pt-2">
          <v-color-picker v-model="colorpicker" class="ma-2" show-swatches mode="HEX"></v-color-picker>
        </v-card>
      </v-menu>

      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-fab-transition>
            <v-btn v-if="autodarkmode" v-on="on" fab icon @click="DarkMode()" >
              <v-icon>{{darkmodeicon}}</v-icon>
            </v-btn>
          </v-fab-transition>
        </template>
        <span>{{$t("message.darkmode")}}</span>
      </v-tooltip>

      <v-menu transition="slide-y-transition" bottom offset-y>
        <template v-slot:activator="{on:menu}">
          <v-tooltip bottom>
            <template v-slot:activator="{ on:tooltip }">
              <v-fab-transition>
                <v-btn v-on="{...tooltip,...menu}" fab icon @click>
                  <v-icon>mdi-earth</v-icon>
                </v-btn>
              </v-fab-transition>
            </template>
            <span>{{$t("message.language")}}</span>
          </v-tooltip>
        </template>
        <v-list>
          <v-list-item v-for="(lang, i) in langs" :key="i" @click="ChangeLang(lang.src)">
            <v-list-item-title>{{ lang.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>

    </v-app-bar>
    <!---侧边栏--->
    <v-navigation-drawer id="drawer" v-model="drawer" app clipped elevation="12">
      <v-list>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon v-if="!this.$cookies.isKey('user')">
              mdi-account-alert
              <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                  <v-progress-circular indeterminate color="primary"></v-progress-circular>
                </v-row>
              </template>
            </v-icon >
            <v-img v-if="this.$cookies.isKey('user')" :src="userinfo.img">
              <template v-slot:placeholder>
                <v-row class="fill-height ma-0" align="center" justify="center">
                  <v-progress-circular indeterminate color="primary"></v-progress-circular>
                </v-row>
              </template>
            </v-img>
          </v-list-item-avatar>
        </v-list-item>
        <v-list-item v-if="!this.$cookies.isKey('user')" link two-line>
          <v-list-item-content @click="OpenLaunchdialog">
            <v-list-item-title class="title">{{$t("message.pleaselogin")}}</v-list-item-title>
            <v-list-item-subtitle>{{$t("message.logintousemorefunc")}}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-list-item v-if="this.$cookies.isKey('user')" link two-line>
          <router-link :to="{name:'space',query:{uid:this.$cookies.get('user')}}">
          <v-list-item-content>
            <v-list-item-title class="title">{{userinfo.name}}</v-list-item-title>
            <v-list-item-subtitle>{{userinfo.text}}</v-list-item-subtitle>
          </v-list-item-content>
          </router-link>
        </v-list-item>
        <v-list shaped dense>
          <v-list-item-group v-model="drawerlist" mandatory>
            <router-link v-for="(item,i) in listitems" :key="i" :to="item.url">
              <v-list-item link @click>
                <v-list-item-icon>
                  <v-icon>{{item.icon}}</v-icon>
                </v-list-item-icon>
                <v-list-item-title>{{item.title}}</v-list-item-title>
              </v-list-item>
            </router-link>
          </v-list-item-group>
        </v-list>
      </v-list>

      <v-divider></v-divider>
      
      <v-list shaped dense>
        <v-list-item v-if="this.$cookies.isKey('user')" link @click="message_dialog=true">
          <v-list-item-icon>
            <v-icon>mdi-logout</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{$t('message.logout')}}</v-list-item-title>
        </v-list-item>
        <v-list-item link @click="OpenSettings">
          <v-list-item-icon>
            <v-icon>mdi-settings</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{$t('message.settings')}}</v-list-item-title>
        </v-list-item>
      </v-list>
      <v-spacer></v-spacer>

      <v-subheader>{{new Date().getFullYear()}}-韩梓健</v-subheader>
      <v-spacer></v-spacer>
      <v-subheader>基于Vuetify构建</v-subheader>
    </v-navigation-drawer>
  </v-container>
</template>


<script>

export default {
  data: () => ({
    message_dialog:false,
    userinfo:"",
    logo:require("../assets/logo1.png"),
    drawer: true,
    color: null,
    colorpicker: "#000000",
       langs: [
      { title: "简体中文", src: "zhHans" },
      { title: "English", src: "en" },
      { title: "日本語", src: "ja" }
    ],
    autodarkmode:null,
  }),
  methods: {
    DarkMode() {
      this.$store.commit("change_dark_mode");
      this.$cookies.set("Dark", this.$store.state.dark_mode, Infinity);
      this.$vuetify.theme.dark = this.$store.state.dark_mode;
      // this.$vuetify.theme.themes.dark.primary = "#474747";
      // this.$vuetify.theme.themes.dark.secondary = "#FFFFFF";
    },
    OpenLaunchdialog() {
      this.$store.commit("open_launch_dialog");
    },
    //跳转外部链接方法
    See(e) {
      window.location.href = e;
	},
	ChangeLang(e){
		this.$i18n.locale=e;
		this.$cookies.set("Lang",e);
  },
  OpenSettings(){
    this.$store.commit("open_settings")
  },
  logout(){
    this.$cookies.remove("user");
    location.reload();
  }
  },
  computed: {
    darkmodeicon: {
      get: function() {
        return this.$store.state.dark_mode_icon;
      },
      
      },

	listitems:{
	 get: function() {
		 return [
      {
        url: "/",
        icon: "mdi-home",
        title: this.$t("message.classes")
      },
      {
        url: "/history",
        icon: "mdi-history",
        title: this.$t("message.history")
      },
      {
        url: "/subscribe",
        icon: "mdi-account-alert",
        title: this.$t("message.subscribe")
      },
      {
        url: "/favor",
        icon: "mdi-star",
        title: this.$t("message.collection")
      },
      {
        url: "/creater",
        icon: "mdi-video-vintage",
        title: this.$t("message.creatercenter")
      },
	];
   },
   
  },
  drawerlist:{
        get: function() {
          if(this.$route.path=="/"){
            return 0;
          }else if(this.$route.path=="/history"){
            return 1;
          }else if(this.$route.path=="/subscribe"){
            return 2;
          }else if(this.$route.path=="/favor"){
            return 3;
          }else if(this.$route.path=="/creater"){
            return 4;
          }else{
            return 0;
          }
          
        }
      },
 
  },
  watch: {
    colorpicker: function() {
      this.$store.commit("chage_primary_color", this.colorpicker);
      this.$cookies.set("Theme", this.colorpicker, Infinity);
      this.$vuetify.theme.themes.light.primary = this.$store.state.theme_primary_color;
      this.$vuetify.theme.themes.light.secondary = this.$store.state.theme_primary_color;
      this.$vuetify.theme.themes.dark.primary = this.$store.state.theme_primary_color;
      this.$vuetify.theme.themes.dark.secondary = this.$store.state.theme_primary_color;
    }
  },
  mounted(){
    if(this.$cookies.isKey('user')){
      var loginBean = new URLSearchParams();
      loginBean.append("fetchUserBean.uid", String(this.$cookies.get("user"))); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/myfetchuser",
        data: loginBean
      })
        .then(response => {
          this.userinfo=JSON.parse(response.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
    this.timer2 = setInterval(() => {
      if(this.$cookies.get("autodarkmode")=="true"){
        this.autodarkmode=false;
      }else{
        this.autodarkmode=true;
      }
    },500)
    
  
},
}
</script>

<style>
/* .v-app-bar {
  background-image: url(../img/background.jpg);
  background-blend-mode: multiply;
  background-repeat: round;
} */

.v-app-bar::before {
  content: attr(data-text);
}
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
/* .v-navigation-drawer {
  background-image: url(../img/background.jpg);
  background-blend-mode: multiply;
  background-repeat: round;
} */

.v-navigation-drawer::before {
  content: attr(data-text);
}
#drawer{
  z-index: 99;
}
#messagelogout{
  z-index: 1005;
}
#appbar{
  z-index: 98;
}
</style>
